<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<%@include file="/WEB-INF/pages/include/css-resource.jsp"%>
<title>角色管理</title>
<style type="text/css">
.row {
	margin-bottom: 10px;
}
</style>
</head>
<body>
	<%@include file="/WEB-INF/pages/include/header.jsp"%>
	<nav aria-label="breadcrumb">
		<ol class="breadcrumb">
			<li class="breadcrumb-item"><a
				href="${pageContext.request.contextPath}/main.html"><i
					class="fas fa-home"></i>主页</a></li>
			<li class="breadcrumb-item active" aria-current="page">角色管理</li>
		</ol>
	</nav>

	<div class="container-fluid">

		<div class="row">
			<div class="col-md-12">
				<form id="searchForm" class="form-inline"
					action="${pageContext.request.contextPath}/app/role/index.html"
					method="post">
					<input type="hidden" id="page" name="page" value="${page}">
					<div class="form-group mb-2">
						<label for="name">角色名称：</label>
					</div>
					<div class="form-group mx-sm-3 mb-2">
						<input type="text" class="form-control" id="name" name="name"
							placeholder="请输入角色名称" value="${name}">
					</div>
					<button type="submit" class="btn btn-primary mb-2">
						<i class="fas fa-search"></i>查询
					</button>
				</form>
				<hr />
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<button type="button" class="btn btn-primary" data-toggle="modal"
					data-target="#addModal">
					<i class="fas fa-plus"></i>添加
				</button>
				<a class="btn btn-primary"
					href="${pageContext.request.contextPath}/app/role/add.html"> <i
					class="fas fa-plus"></i>批量添加
				</a>
				<button type="button" class="btn btn-success" onclick="page()">
					<i class="fas fa-sync-alt"></i>刷新
				</button>
				<button type="button" class="btn btn-secondary float-right"
					onclick="back()">
					<i class="fas fa-reply"></i>返回
				</button>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<table class="table table-hover table-sm">
					<thead>
						<tr>
							<th scope="col">#</th>
							<th scope="col">编码</th>
							<th scope="col">名称</th>
							<th scope="col">助记码</th>
							<th scope="col">禁用</th>
							<th scope="col">创建时间</th>
							<th scope="col">操作</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${list}" var="obj" varStatus="st">
							<tr>
								<th scope="row">${st.count}</th>
								<td>${obj.code}</td>
								<td>${obj.name}</td>
								<td>${obj.mnemonic}</td>
								<td>
									<div class="custom-control custom-checkbox mr-sm-2">
										<input type="checkbox" class="custom-control-input"
											id="c${obj.id}" ${obj.disabled?"checked":""}
											onchange="changeDisabled('${obj.id}')"> <label
											class="custom-control-label" for="c${obj.id}"></label>
									</div>
								</td>
								<td><fmt:formatDate value="${obj.creationTime}"
										pattern="yyyy-MM-dd HH:mm:ss" /></td>
								<td><a class="btn btn-info btn-sm" title="编辑"
									href="${pageContext.request.contextPath}/app/role/edit/${obj.id}">
										<i class="fas fa-edit"></i>
								</a> &nbsp; <a class="btn btn-danger btn-sm" title="删除"
									href="javascript:del('${obj.id}')"><i class="fas fa-trash"></i></a></td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6">第&nbsp;${page}&nbsp;页
				,共&nbsp;${pages}&nbsp;页（每页显示&nbsp;${size}&nbsp;条记录，共&nbsp;${total}&nbsp;条记录）</div>
			<div class="col-md-6">
				<nav>
					<ul class="pagination float-right">
						<c:choose>
							<c:when test="${page==1}">
								<li class="page-item disabled"><span class="page-link">第一页</span></li>
								<li class="page-item disabled"><span class="page-link">上一页</span></li>
							</c:when>
							<c:otherwise>
								<li class="page-item"><a class="page-link"
									href="javascript:page('1')">第一页</a></li>
								<li class="page-item"><a class="page-link"
									href="javascript:page('${page-1}')">上一页</a></li>
							</c:otherwise>
						</c:choose>
						<c:choose>
							<c:when test="${page==pages}">
								<li class="page-item disabled"><span class="page-link">下一页</span></li>
								<li class="page-item disabled"><span class="page-link">最后一页</span></li>
							</c:when>
							<c:otherwise>
								<li class="page-item"><a class="page-link"
									href="javascript:page('${page+1}')">下一页</a></li>
								<li class="page-item"><a class="page-link"
									href="javascript:page('${pages}')">最后一页</a></li>
							</c:otherwise>
						</c:choose>


					</ul>
				</nav>
			</div>
		</div>
	</div>

	<div class="modal fade" id="addModal" data-backdrop="static"
		tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel"
		aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="staticBackdropLabel">添加角色</h5>
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<form id="addForm">
						<div class="form-group row">
							<label for="code" class="col-sm-2 col-form-label">编码</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="code" name="code">
							</div>
						</div>
						<div class="form-group row">
							<label for="name" class="col-sm-2 col-form-label">名称</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="roleName"
									name="roleName">
							</div>
						</div>
						<div class="form-group row">
							<label for="mnemonic" class="col-sm-2 col-form-label">助记码</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="mnemonic"
									name="mnemonic">
							</div>
						</div>
						<div class="form-group row">
							<label for="disabled" class="col-sm-2 col-form-label">禁用</label>
							<div class="col-sm-10">
								<div class="custom-control custom-checkbox mr-sm-2">
									<input type="checkbox" class="custom-control-input"
										id="disabled" name="disabled"> <label
										class="custom-control-label" for="disabled"></label>
								</div>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" onclick="save(${page})">保存</button>
					<button type="button" class="btn btn-secondary"
						data-dismiss="modal">取消</button>
				</div>
			</div>
		</div>
	</div>

	<%@include file="/WEB-INF/pages/include/js-resource.jsp"%>
	<script type="text/javascript">
		function save(page) {
			$
					.ajax({
						url : "${pageContext.request.contextPath}/api/role/save",
						type : "POST",
						data : {
							code : $("#code").val(),
							name : $("#roleName").val(),
							mnemonic : $("#mnemonic").val(),
							disabled : $("#disabled").is(":checked")
						},
						dataType : "json",
						success : function(result) {
							alert(result.message);
							if (result.code == 0) {
								$("#addModal").modal("hide");
								$("#addForm")[0].reset();
								page(page);
							} else if (result.code == 2) {
								window.location.href = "${pageContext.request.contextPath}/login.html";
							}
						},
						error : function(err) {
							alert("保存角色信息失败！");
							console.log(err);
						}
					});
		}

		function del(id) {
			if (confirm("此操作将永久性的删除数据不可恢复，是否继续？")) {
				window.location.href = "${pageContext.request.contextPath}/app/role/del/"
						+ id;
			}
		}

		function changeDisabled(id) {
			$
					.ajax({
						url : "${pageContext.request.contextPath}/api/role/change/disabled",
						type : "POST",
						data : {
							id : id,
							disabled : $("#c" + id).is(":checked")
						},
						dataType : "json",
						success : function(result) {
							alert(result.message);
						},
						error : function(err) {
							alert("更改角色禁用状态失败！");
							console.log(err);
						}
					});
		}

		function back() {
			window.history.back();
		}
		function page(page) {
			$("#page").val(page);
			$("#searchForm").submit();
		}
	</script>
</body>
</html>